<template>
  <div>
    <div class="treeStyle fll transitionAll" :style="{'width':!showMenu?3.6+'rem':0}">
      <div class="transitionAll" v-if="!showMenu">
        <div class="titleS">
          <span>{{treeName}}</span>
        </div>
        <el-tree :data="treeList" highlight-current :props="defaultProps" default-expand-all :expand-on-click-node="openTree" class="treeCon"
          @node-click="handleNodeClick"></el-tree>
      </div>
      <div :class="showMenu?'showMenuButton':'hideMenuButton'" class="transitionAll" @click="showHideMenu">
        <i :class="showMenu?'el-icon-arrow-right':'el-icon-arrow-left'"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['treeList', 'treeName'],
  data () {
    return {
      showMenu: false,//是否显示区域信息
      defaultProps: {
        children: 'subDomainBOList',
        label: 'name'
      },
      openTree: false,
    }
  },
  methods: {
    //展开收起区域信息
    showHideMenu () {
      this.showMenu = !this.showMenu
      this.$emit('showTree', this.showMenu)
    },
    //点击列表获取数据
    handleNodeClick (data) {
      this.$emit('getTree', data)
    },
  },
}
</script>
<style scoped>
.titleStyle {
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  height: 55px;
}
.treeStyle {
  height: calc(100vh - 70px);
  position: fixed;
  top: 70px;
  z-index: 999;
}
.titleS {
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #bbb;
  font-size: 0.32rem;
  color: #333;
}
.treeCon {
  height: calc(100vh - 120px);
  background: #e5e5e5;
  overflow: auto;
}
</style>